<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    max-height="250">
    <el-table-column  align="center"
      prop="orderNo"
      label="Order_NO"
      width="180">
    </el-table-column>
    <el-table-column align="center"
      prop="price"
      label="Price">
    </el-table-column>
    <el-table-column align="center"
      prop="status"
      label="Status"
      width="180"
     :filters="[{ text: '未决', value: 'pending' }, { text: '成功', value: 'success' }]"
     :filter-method="filterTag">
      <template slot-scope="scope">
        <el-tag
          :type="scope.row.status === 'pending' ? 'primary' : 'success'"
          close-transition>{{scope.row.status}}</el-tag>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
    import {getTransactions} from "@/api";

    export default {
      name: "transactionTable",
      data() {
        return {
          tableData: []
        }
      },
      created:function () {
        console.log('transactionTable>created')
        this.fetchData()
      },
      methods:{
        fetchData: function () {
          let vm = this
          getTransactions()
            .then(function (data) {
              vm.tableData = data.transactions
            })
            .catch(error=>{
              console.log('transactionTable.vue>fetchData>' + error)
            })
        },
        filterTag(value, row) {
          return row.status === value;
        },
        filterHandler(value, row, column) {
          const property = column['property'];
          return row[property] === value;
        }
      }
    }
</script>

<style scoped>

</style>
